<template>
  <div class="dashboard-container">
    <!-- 欢迎标题 -->
    <el-card class="welcome-card">
      <h2>欢迎使用OA办公系统管理端</h2>
    </el-card>

      <!-- 数据卡片区域 -->
      <div class="stats-cards">
        <el-card class="card-item" shadow="hover" @click="navigateTo('/expense')">
          <div class="card-content">
            <div class="card-icon expense-icon">
              <el-icon><Ticket /></el-icon>
            </div>
            <div class="card-text">
              <div class="card-title">报销待处理</div>
              <div class="card-number">{{ expensePendingCount }}个</div>
            </div>
          </div>
        </el-card>

        <el-card class="card-item" shadow="hover" @click="navigateTo('/leave')">
          <div class="card-content">
            <div class="card-icon leave-icon">
              <el-icon><Stamp /></el-icon>
            </div>
            <div class="card-text">
              <div class="card-title">请假待处理</div>
              <div class="card-number">{{ leavePendingCount }}个</div>
            </div>
          </div>
        </el-card>

        <el-card class="card-item" shadow="hover" @click="navigateTo('/task')">
          <div class="card-content">
            <div class="card-icon task-icon">
              <el-icon><Connection /></el-icon>
            </div>
            <div class="card-text">
              <div class="card-title">进行中任务</div>
              <div class="card-number">{{ ongoingTaskCount }}个</div>
            </div>
          </div>
        </el-card>

        <el-card class="card-item" shadow="hover" @click="navigateTo('/user')">
          <div class="card-content">
            <div class="card-icon employee-icon">
              <el-icon><UserFilled /></el-icon>
            </div>
            <div class="card-text">
              <div class="card-title">在职员工</div>
              <div class="card-number">{{ employeeCount }}人</div>
            </div>
          </div>
        </el-card>
      </div>
    <!-- 统计图表区域 -->
    <div class="chart-row">
      <!-- 考勤异常统计 -->
      <el-card class="chart-card">
        <div class="chart-title">考勤异常统计</div>
        <div ref="attendanceChart" class="chart-container"></div>
      </el-card>

      <!-- 部门人员分布 -->
      <el-card class="chart-card">
        <div class="chart-title">部门人员分布</div>
        <div ref="departmentChart" class="chart-container"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { getAttendanceStats, getDepartmentStats,getAllTrendDataService } from '@/api/home'
import { 
  HomeFilled, 
  UserFilled, 
  User, 
  OfficeBuilding, 
  Document, 
  Stamp, 
  Ticket, 
  Calendar, 
  Connection, 
  Setting,
  ArrowUp,
  ArrowDown,
  More // 使用兼容的 More 图标
} from '@element-plus/icons-vue'
// 图表 DOM 引用
const attendanceChart = ref()
const departmentChart = ref(null)
let attendanceChartInstance = null
let departmentChartInstance = null
import { useRouter } from 'vue-router'
const router = useRouter()
const expensePendingCount =  ref(0)
const leavePendingCount =  ref(0)
const ongoingTaskCount =  ref(0)
const employeeCount =  ref(0)
//获取前端展示的数据
const getAllTrendData = async () => {
  const result = await getAllTrendDataService()
  expensePendingCount.value = result.data.expensePendingCount
  leavePendingCount.value = result.data.leavePendingCount
  ongoingTaskCount.value = result.data.ongoingTaskCount
  employeeCount.value = result.data.employeeCount
}

// 初始化考勤异常折线图
const initAttendanceChart = async () => {
 // const { data } = await getAttendanceStats()
  const data = {
    months: ['2023-04', '2023-06', '2023-08', '2023-10', '2023-12', '2024-02'],
    values: [12, 8, 15, 10, 7, 5]
  }
  const option = {
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: data.months,
      axisLabel: { color: '#666' }
    },
    yAxis: { type: 'value', axisLabel: { color: '#666' } },
    series: [{
      data: data.values,
      type: 'line',
      smooth: true,
      lineStyle: { color: '#409EFF', width: 3 },
      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(64, 158, 255, 0.4)' },
        { offset: 1, color: 'rgba(64, 158, 255, 0)' }
      ])}
    }],
    grid: { top: '15%', bottom: '15%', containLabel: true }
  }
  attendanceChartInstance.setOption(option)
}


// 初始化部门分布饼图
const initDepartmentChart = async () => {
  //const { data } = await getDepartmentStats()
  const data= [
        { department: '研发部', count: 45 },
        { department: '运维部', count: 28 },
        { department: '销售部', count: 32 },
        { department: '行政部', count: 18 }
      ]
  const option = {
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'right', textStyle: { color: '#666' } },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      data: data.map(item => ({ 
        value: item.count, 
        name: item.department,
        itemStyle: { 
          color: `hsl(${Math.random() * 360}, 70%, 60%)`   
        }
      })),
      label: { show: true, formatter: '{b}: {d}%' }
    }]
  }
  departmentChartInstance.setOption(option)
}
// 导航到指定页面
const navigateTo = (path) => {
  router.push(path)
}
// 窗口调整时自适应图表
const handleResize = () => {
  attendanceChartInstance?.resize()
  departmentChartInstance?.resize()
}

onMounted(() => {
  attendanceChartInstance = echarts.init(attendanceChart.value)
  departmentChartInstance = echarts.init(departmentChart.value)
  window.addEventListener('resize', handleResize)
  getAllTrendData()
  initAttendanceChart()
  initDepartmentChart()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  attendanceChartInstance?.dispose()
  departmentChartInstance?.dispose()
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.chart-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
}

.chart-card {
  transition: box-shadow 0.3s;
}

.chart-card:hover {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}

.chart-container {
  width: 100%;
  height: 400px;
}
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}
.card-item {
  height: 180px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card-item:hover {
  transform: translateY(-5px);
}

.card-content {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
}

.expense-icon {
  background-color: #f1c40f;
}

.leave-icon {
  background-color: #9b59b6;
}

.task-icon {
  background-color: #3498db;
}

.employee-icon {
  background-color: #27ae60;
}

.card-text {
  flex: 1;
}

.card-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 10px;
}

.card-number {
  font-size: 32px;
  font-weight: 600;
  color: #303133;
}



</style>